<template>
  <div class="main-container">
    <el-row :gutter="20" v-loading="countLoading">
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <div class="dataNow one">
          <span class="title">用户总数量</span>
          <div class="dataNow_info">
            <el-icon size="35"><User /></el-icon>
            <span class="number"
              ><count-to
                :startVal="0"
                :endVal="countOption.userCount"
                :decimals="0"
                :duration="3000"
              ></count-to
            ></span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <div class="dataNow two">
          <span class="title">前端浏览量</span>
          <div class="dataNow_info">
            <el-icon size="35"><DataLine /></el-icon>
            <span class="number"
              ><count-to
                :startVal="0"
                :endVal="countOption.webCount"
                :decimals="0"
                :duration="3000"
              ></count-to
            ></span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <div class="dataNow three">
          <span class="title">后端访问量</span>
          <div class="dataNow_info">
            <el-icon size="35"><DataAnalysis /></el-icon>
            <span class="number"
              ><count-to
                :startVal="0"
                :endVal="countOption.logCount"
                :decimals="0"
                :duration="3000"
              ></count-to
            ></span>
          </div>
        </div>
      </el-col>
      <!-- <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="dataNow four">
          <span class="title">待查看消息</span>
          <div class="dataNow_info">
            <el-icon size="35"><ChatDotRound /></el-icon>
            <span class="number">1</span>
          </div>
        </div>
      </el-col> -->
    </el-row>
    <el-row :gutter="20" class="echarts" v-loading="webLoading">
      <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
        <div class="echarts_container">
          <div class="echarts_container_title">
            <span>前端各页面访问量</span>
            <span>
              <el-date-picker
                v-model="webTime"
                type="datetimerange"
                :shortcuts="shortcuts"
                value-format="YYYY-MM-DD HH:mm:ss"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="handleChange"
              />
            </span>
          </div>
          <div class="echarts_container_main" ref="webLineRef"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <div class="echarts_container">
          <div class="echarts_container_title">
            <span>单项数据总量</span>
          </div>
          <div class="echarts_container_main" ref="webPieRef"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { CountTo } from "vue3-count-to";
import * as echarts from "echarts";
import { getWebdata, getCount } from "@/api";
import { parseTime } from "@/utils/util";
import { onMounted, ref } from "vue";
import { onBeforeUnmount } from "vue";
const { proxy } = getCurrentInstance();
const shortcuts = [
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [parseTime(start), parseTime(end)];
    },
  },
  {
    text: "近一月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [parseTime(start), parseTime(end)];
    },
  },
  {
    text: "近三月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [parseTime(start), parseTime(end)];
    },
  },
];
const countOption = ref({ userCount: 0, logCount: 0, webCount: 0 });
const webTime = ref();
const defaultTime = shortcuts[0].value();

const webLoading = ref(false);
const countLoading = ref(false);
const webLine = ref(null);
const webPie = ref(null);
const echartsData = {
  title: {
    text: "",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: [],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [],
};

const webLineRef = ref();
const webPieRef = ref();
const webLineFun = () => {
  webLoading.value = true;
  getWebdata({ time: webTime.value }).then((res) => {
    if (res.code == 200) {
      createWebLine(res.data);
      createWebPie(res.data);
    }
    webLoading.value = false;
  });
};
const createWebLine = (data) => {
  let webLineData = JSON.parse(JSON.stringify(echartsData));
  webLineData.xAxis.data = data.line.time;
  webLineData.legend.data = Object.values(data.type);
  for (const key in data.type) {
    const element = data.type[key];
    webLineData.series.push({
      name: element,
      type: "line",
      smooth: true,
      data: data.line.data[key],
    });
  }
  webLineData.xAxis.boundaryGap = false;
  webLine.value.setOption(webLineData);
};
const createWebPie = (data) => {
  let webPieData = JSON.parse(JSON.stringify(echartsData));
  webPieData.tooltip.trigger = "item";
  webPieData.series = [
    {
      type: "pie",
      radius: "70%",
      center: ["50%", "50%"],
      data: [],
      roseType: "radius",
    },
  ];
  for (const item of data.count) {
    webPieData.series[0].data.push({
      value: item.count,
      name: item.logType,
    });
  }
  webPieData.series[0].data = webPieData.series[0].data.sort(function (a, b) {
    return a.value - b.value;
  });
  if (webPieData.hasOwnProperty("xAxis")) {
    delete webPieData.xAxis;
    delete webPieData.yAxis;
  }
  webPie.value.setOption(webPieData);
};

const getCountFun = () => {
  countLoading.value = true;
  getCount().then((res) => {
    if (res.code == 200) {
      countOption.value = res.data;
    }
    countLoading.value = false;
  });
};
const handleChange = (val) => {
  webLineFun();
};

let timeout;
onMounted(() => {
  webLine.value = markRaw(echarts.init(webLineRef.value));
  webPie.value = markRaw(echarts.init(webPieRef.value));

  getCountFun();
  webTime.value = defaultTime;
  webLineFun();
  window.addEventListener("resize", () => {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      webLine.value?.resize({ animation: { duration: 500 } });
      webPie.value?.resize({ animation: { duration: 500 } });
    }, 200);
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    if (timeout) clearTimeout(timeout);
  });
  webLine.value?.destroy();
  webPie.value?.destroy();
});
</script>

<style scoped lang="scss">
.dataNow {
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: var(--dark-shadow-004f2);
  padding: 15px 20px;
  color: rgba($color: #000000, $alpha: 0.6);
  .title {
    font-size: 16px;
    font-weight: bold;
  }
  &_info {
    @include flexBox(row, null, center);
    margin-top: 5px;
    .number {
      font-size: 28px;
      margin: 0 10px;
      font-weight: bold;
    }
  }
  &.one {
    @include linearGradient(to right bottom, #ffffff, #fab6b6);
  }
  &.two {
    @include linearGradient(to right bottom, #ffffff, #a3d3ff);
  }
  &.three {
    @include linearGradient(to right bottom, #ffffff, #e5bef5);
  }
  &.four {
    @include linearGradient(to right bottom, #ffffff, #8af9ca);
  }
}
@mixin boxStyle {
  background: var(--box-back-color);
  box-shadow: var(--dark-shadow-001ad4);
  border-radius: 8px;
}
.echarts {
  &_container {
    @include boxStyle;
    // height: 20vh;
    margin-top: 20px;
    &_title {
      @include flexBox(row, space-between, center, wrap);
      padding: 10px 20px;
      min-height: 60px;
      font-size: 16px;
      border-bottom: 2px solid var(--border-color);
    }
    &_main {
      width: 100%;
      height: 50vh;
    }
  }
}
</style>
